<template>
    <div class="payroot">
        <div class="yo-ico" @click="handleClick">&#xe60c;</div>
        <h1 class="head"><span>支付</span>成功</h1>
        <ul class="firstUl">
            <li class="firstLi"><i class="yo-ico">&#xe612;</i>订单明细</li>
            <li>订单编号<i>2019554165165</i></li>
            <li>订单类型<i>课程</i></li>
            <li>课程名称<i>HIIT燃脂跑教程</i></li>
            <li>课程价格<i>￥239.00</i></li>
            <li>活动优惠<i>-￥40.00</i></li>
            <li>优惠后价格<i class="seven">￥199</i></li>
            <li class="eightLi">支付方式<i>支付宝</i></li>
            <li>支付流水号<i>45646466565464</i></li>
        </ul>
        
        <div class="study" @click="clickStudy">开始学习</div>
        <div class="footer">事不宜迟，现在就开始动起来~</div>
    </div>
</template>

<script>
    export default ({
        methods:{
            handleClick(){
                this.$router.push('/index/my/order');
            },
            clickStudy(){
                this.$router.push('/index/my/Mycourse');
                // this.$router.push('/index/my/order');
            }
        }
    })
</script>

<style lang='stylus' scoped>
    @import "../../assets/stylus/border.styl"
    .payroot
        width 100%
        height 100vh
        display flex
        flex-direction column
        justify-content space-around
        margin 20px 0 15px 0
        padding 0 8%
        background-image: linear-gradient(#5a5a5a, #f5f5f5)
        
        &:first-child 
            font-size 18px
            color #fff
            line-height 20px
        
        .head 
            font-size 18px
            color #ffffff
            margin-top -5%

            span
                color #f6cc95
        .firstUl 
            margin-top -5%
            width 100%
            height 56%
            background-color #fff
            color #000
            padding 0 7%
            display flex
            flex-direction column
            justify-content space-around
            font-size 12px

            li 
                border_1px(0 0 1px 0,#f5f6fa)
                display flex
                justify-content space-between
                font-size .12rem
            .firstLi 
                color #ccc
                justify-content flex-start
                height 6%
                line-height 6%
                margin-top 6%
            i   
                    font-size 12px
                    color #ccc
            .seven 
                color #f6cc95   
            .eightLi  
                margin-top 3%
        
        .study
            width 100%
            height 5%
            background-color #6739fe
            color #ffffff
            border-radius .5rem
            margin-top 10%
            display flex
            justify-content center
            align-items center
        .footer
            font-size 12px
            color #ccc 
            margin-bottom 5%
            margin-top -10%
            text-align center
</style>